<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="C:\Users\shannonh\kaikeba\projects\web-arch\vue01-02\vue-router\node_modules\vue\dist\vue.js"></script>
</head>
<body>
    <div id="demo">
        <h1>Async update</h1>
        <p id="p1">{{foo}}</p>
    </div>

    <script>
        const app = new Vue({
            el: '#demo',
            data: {
                foo: 'ready~~'
            },
            mounted() {
                this.$nextTick(() => {
                    console.log("p1.innerHTML", p1.innerHTML)
                })
                this.foo = Math.random()
                console.log("1. ", this.foo)

                this.foo = Math.random()
                console.log("2. ", this.foo)

                Promise.resolve()
                  .then(() =>{
                    console.log("in promise: " + p1.innerHTML)
                  })
                  
                this.foo = Math.random()
                console.log("3. ", this.foo)

                console.log("p1.innerHTML: " + p1.innerHTML)


            }
        })
    </script>
</body>
</html>